<template>
  <div h8 flex class="concave" min-w="5rem">
    <div flex-shrink-0 bg-orange-5 c-white w='1rem' flex items-center justify-center>S</div>
    <input flex-basis-0 w0 flex-1 border-none outline-none :value="modelValue"
      @change="$emit('update:modelValue', ($event.target as any).value)" />
  </div>
</template>

<script setup lang="ts">
defineProps<{
  modelValue: string
}>()
defineEmits<{
  (e: 'update:modelValue', event: string): void,
}>()
</script>

<style lang="scss">
.var-input-string .el-input__wrapper {
  background: #fff;
  border-bottom: 2px solid orange;
  border-right: 2px solid orange;
  overflow: hidden;

  .el-input__inner {
    color: #000;
  }
}
</style>